<template>
	<div class="userbox">
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="dialogForm" label-width="auto" label-position="right">
				<div class="left-side">
					<el-form-item :label="$t('account_data.accountName')" prop="accountName" >
						<el-input v-model="form.accountName" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('account_data.accountEmail')" prop="accountEmail" >
						<el-input v-model="form.accountEmail" clearable :placeholder="$t('account_data.email_placeholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('account_data.password')" prop="password" >
						<el-input v-model="form.password" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
				</div>
				<div class="right-side">
					<el-form-item :label="$t('account_data.role')" prop="role" >
						<el-select v-model="form.role" :placeholder="$t('table_data.selectText')" clearable :disabled="disabled">
							<el-option
								v-for="item in roleList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('account_data.status')" prop="status" >
						<el-select v-model="form.status" :placeholder="$t('table_data.selectText')" clearable :disabled="disabled">
							<el-option
								v-for="item in statusList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</div>
			</el-form>
		</div>
		<div id="footer" v-if="!disabled">
			<!-- <el-button @click="visible=false" >{{$t('table_data.cancelText')}}</el-button> -->
			<el-button type="primary" :loading="isSaveing" @click="submit()">{{$t('table_data.saveText')}}</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			var checkImg = (rule, value, callback) => {
				if (!this.form.imageFileId) {
					return callback(new Error(this.$t('formRule.image_rule')));
				} else {
					callback()
				}
			};
			var zh_TW = (rule,value,callback) => {
				if (!this.form.title.zh_TW) {
					return callback(new Error(this.$t('formRule.tnMovieName')));
				} else {
					callback()
				}
			};
			var en_US = (rule,value,callback) => {
				if (!this.form.title.en_US) {
					return callback(new Error(this.$t('formRule.usMovieName')));
				} else {
					callback()
				}
			};
			var ja_JP = (rule,value,callback) => {
				if (!this.form.title.ja_JP) {
					return callback(new Error(this.$t('formRule.jaMovieName')));
				} else {
					callback()
				}
			};
			var zh_CN = (rule,value,callback) => {
				if (!this.form.title.zh_CN) {
					return callback(new Error(this.$t('formRule.cnMovieName')));
				} else {
					callback()
				}
			};
			var mess_zh_TW = (rule,value,callback) => {
				if (!this.form.information.zh_TW) {
					return callback(new Error(this.$t('formRule.inputPlaceholder')));
				} else {
					callback()
				}
			};
			var mess_en_US = (rule,value,callback) => {
				if (!this.form.information.en_US) {
					return callback(new Error(this.$t('formRule.inputPlaceholder')));
				} else {
					callback()
				}
			};
			var mess_ja_JP = (rule,value,callback) => {
				if (!this.form.information.ja_JP) {
					return callback(new Error(this.$t('formRule.inputPlaceholder')));
				} else {
					callback()
				}
			};
			var mess_zh_CN = (rule,value,callback) => {
				if (!this.form.information.zh_CN) {
					return callback(new Error(this.$t('formRule.inputPlaceholder')));
				} else {
					callback()
				}
			};mess_en_US
			return {
				mode: "add",
				disabled: false,
				langList: [
					{
						name: '简体中文',
						value: 'zh_CN',
					},
					{
						name: '繁體中文',
						value: 'zh_TW',
					},
					{
						name: 'English',
						value: 'en_US',
					},
					{
						name: '日本語',
						value: 'ja_JP',
					}
				],
				typeList: [
					{
						name: this.$t('movie_data.userType.type1'),
						value: 1,
					},
					{
						name: this.$t('movie_data.userType.type2'),
						value: 2,
					}
				],
				statusList: [
					{
						name: this.$t('account_data.statusObj.type1'),
						value: 1,
					},
					{
						name: this.$t('account_data.statusObj.type2'),
						value: 0,
					}
				],
				sexlist: [
					{
						value: 1,
						name: this.$t('movie_data.sex.male'),
					},
					{
						value: 0,
						name: this.$t('movie_data.sex.female'),
					},
					{
						value: 2,
						name: this.$t('movie_data.sex.other'),
					},
				],
				titleMap: {
					add: this.$t('table_data.adduserTitle'),
					edit: this.$t('table_data.userTitle')
				},
				locationArr: [{
          value: 'ja',
          label: 'Japanese'
        }, {
          value: 'en',
          label: 'English'
        }, {
          value: 'chs',
          label: '中文简体'
        }, {
          value: 'cht',
          label: '中文繁體'
        }],
				movieTitle: {
					en_US: '',
					ja_JP: '',
					zh_CN: '',
					zh_TW: '',
				},
				movieDesc: {
					en_US: '',
					ja_JP: '',
					zh_CN: '',
					zh_TW: '',
				},
				roleList: [
					{
						value: 1,
						label: this.$t('account_data.admin')
					}
				],
				action: this.$API.upload.creator_uploadFile,
				autoUpload: false,
				image: null,
				form: {
					role: 1
				},
				uploadForm: {
					movie_id: '',
					start_date: '',
					end_date: '',
					official_site: '',
					officialSiteName: '',
					information: '',
					file: null,
					title: '',
				},
				rules: {
					"title.en_US": [
						{required: true,validator: en_US, trigger:'blur'}
					],
					"title.ja_JP": [
						{required: true,validator: ja_JP, trigger:'blur'}
					],
					"title.zh_CN": [
						{required: true,validator: zh_CN, trigger:'blur'}
					],
					"title.zh_TW": [
						{required: true,validator: zh_TW, trigger:'blur'}
					],
					"information.en_US": [
						{required: true,validator: mess_en_US, trigger:'blur'}
					],
					"information.ja_JP": [
						{required: true,validator: mess_ja_JP, trigger:'blur'}
					],
					"information.zh_CN": [
						{required: true,validator: mess_zh_CN, trigger:'blur'}
					],
					"information.zh_TW": [
						{required: true,validator: mess_zh_TW, trigger:'blur'}
					],
					// "officialSite": [
					// 	{required: true, message: this.$t('formRule.officialSite_rule'),trigger:'blur'}
					// ],
					// "officialSiteName": [
					// 	{required: true, message: this.$t('formRule.officialSiteName_rule'),trigger:'blur'}
					// ],
					"startDate": [
						{required: true, message: this.$t('formRule.startDate_rule'),trigger:'change'}
					],
					"endDate": [
						{required: true, message: this.$t('formRule.endDate_rule'),trigger:'change'}
					],
					"image": [
						{required: true,validator: checkImg, trigger:'change'}
					],
					"imageFileId": [
						{required: true, validator: checkImg, trigger:'change'}
					],
					accountName: [
						{required: true,message: this.$t('formRule.inputPlaceholder'), trigger:'blur'}
					],
					accountEmail: [
						{required: true,message: this.$t('formRule.inputPlaceholder'), trigger:'blur'}
					],
					password: [
						{required: true,message: this.$t('formRule.inputPlaceholder'), trigger:'blur'}
					],
					role: [
						{required: true,message: this.$t('formRule.selectPlaceholder'), trigger:'change'}
					],
					status: [
						{required: true,message: this.$t('formRule.selectPlaceholder'), trigger:'change'}
					]
				},
				visible: false,
				isSaveing: false
			}
		},
		mounted(){
			this.disabled = this.$route.query.type=='detail'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.cinema.accountDetail'):this.$t('menu.cinema.accountEdit'))
			if(this.$route.query.id != 'add'){
				this.getInfo()
			}
		},
		methods: {
			removeFile(){
				this.form.imageFileId = null;
			},
			uploadCallBack(res,file){
				if(res&&res.code == 'OK'){
					this.form.imageFileId = res.data.file_id;
					this.form.image = file.tempFile || '';
					this.$message.success(this.$t('table_data.operasucc'))
				}
			},
			beforeOptions(v){
				return v.getTime() > new Date(this.form.endDate).getTime();//  - 86400000是否包括当天
			},
			backOptions(v){
				return v.getTime() < new Date(this.form.startDate).getTime();//  - 86400000是否包括当天
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			async getInfo(){
				let id = this.$route.query.id;
				const res = await this.$API.cinema_account.getAccountDetail.get(id);
				this.form = res.data;
			},
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;

						let form = {};
						Object.assign(form,this.form);
						// form.startDate = this.$TOOL.dateFormat(form.startDate,'yyyy-MM-dd');
						// form.endDate = this.$TOOL.dateFormat(form.endDate,'yyyy-MM-dd');
						// form.title = JSON.stringify(this.movieTitle);
						// form.information = JSON.stringify(this.movieDesc);
						var res = await this.$API.cinema_account.uploadInfo.post(form);
						this.isSaveing = false;
						if(res.code == 'OK'){
							this.$emit('success', this.form, this.mode)
							this.$message.success(this.$t('table_data.operasucc'))
							this.closeTag();
						}else{
							this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.left-side, .right-side {
	width: 46%;
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	height: 200px;
	width: 100%;
	margin-bottom: 18px;
}
.item-desc {
	height: 500px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
}
</style>
